<template>
  <div>
    <el-card class="box-card" shadow="always">
      <span slot="header" class="title-weight">公告牌</span>
      <span>每周之星: {{ starName }} </span>
      <i style="color: #ee001a" class="el-icon-star-on" />
    </el-card>
    <el-card v-show="isLogin" class="card-top box-card" shadow="always">
      <span slot="header" class="title-weight">我的刷题情况</span>
      <el-row>
        <el-col :span="14"><span>今日刷题：{{ myProblem.day }}</span></el-col>
        <el-col :span="8"><span>目标：2</span></el-col>
        <el-col :span="2"><i :class="getIcon(myProblem.day >= 2)" /></el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="14"><span>最近一周：{{ myProblem.week }}</span></el-col>
        <el-col :span="8"><span>目标：14</span></el-col>
        <el-col :span="2"><i :class="getIcon(myProblem.week >= 14)" /></el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="14"><span>最近一月：{{ myProblem.month }}</span></el-col>
        <el-col :span="8"><span>目标：60</span></el-col>
        <el-col :span="2"><i :class="getIcon(myProblem.month >= 60)" /></el-col>
      </el-row>
    </el-card>
    <el-card class="card-top box-card" shadow="always">
      <span slot="header" class="title-weight">团队 CF rated</span>
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        border
        :header-cell-style="{backgroundColor: '#f1f1f1', color: '#000000', padding: '5px 0'}"
        :cell-style="{padding: '7px 0', color: '#000000'}"
        style="width: 100%"
      >
        <el-table-column align="center" label="#" width="50">
          <span slot-scope="scope">{{ scope.$index + 1 }}</span>
        </el-table-column>
        <el-table-column align="center" prop="account" label="用户名">
          <el-link
            slot-scope="scope"
            :underline="false"
            :style="getResultColor(scope.row.userCfScore)"
            @click="jumpProfile(scope.row.userId)"
          >{{ scope.row.account }}
          </el-link>
        </el-table-column>
        <el-table-column align="center" prop="userCfScore" label="rating" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { resultCfColorMixin } from '@/common/mixins'
import { getCfScore, mySolved, weekStar } from '@/networks/dynamic'

export default {
  name: 'CardRight',
  mixins: [resultCfColorMixin],
  data() {
    return {
      tableData: [],
      myProblem: {},
      starName: '',
      loading: true
    }
  },
  computed: {
    isLogin() {
      return !this.$store.getters.isLogin
    }
  },
  watch: {
    isLogin(va) {
      if (va) {
        this.init()
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      getCfScore().then(res => {
        this.tableData = res.data.data
        this.loading = false
      })
      weekStar().then(res => {
        this.starName = res.data.msg
      })
      if (this.isLogin) {
        mySolved(this.$store.state.user.userId)
          .then(res => {
            this.myProblem = res.data.data
          })
      }
    },
    jumpProfile(id) {
      this.$router.push({
        path: 'profile',
        query: { id: id }
      })
    },
    getIcon(isSuccess) {
      if (isSuccess) {
        return 'el-icon-success success'
      }
      return 'el-icon-error fail'
    }
  }

}
</script>

<style scoped>
  .box-card {
    width: 340px;
  }

  .card-top {
    margin-top: 30px;
    padding: 0;
  }

  .success {
    color: #67C23A;
  }

  .fail {
    color: #E6A23C;
  }

  .title-weight {
    font-weight: 700;
  }
</style>
